<template>
    <div class="recharge-box" v-cloak>
        <div class="tel-input" :class="{'curPadding':oData.carrier&&!isCleanTel}">
            <div class="input-bg">
            <input type="tel" placeholder="请输入手机号码" maxlength="13" v-model.trim="telnum" @focus="isCleanTel=true" @keyup="changeInput($event)" @blur="blurFun()">
            <span class="input-close" v-if="isCleanTel" @click="clearTel"></span>
            <!-- <span v-if="oData.carrier&&!isCleanTel">{{oData.carrier}}</span> -->
            <span class="getAddressList" v-if="!isCleanTel && isApp" @click="getTelFun()"></span>
             
            </div>
            <p v-if="oData.carrier&&!isCleanTel">{{oData.carrier}} <span v-if="telname">({{telname}})</span></p>
            <ul class="localtel-list" v-show="isCleanTel && localTel">
                <li @click="clickLocalTel($event,index,data)" v-for="(data,index) in localTel">
                    <span>{{data}}</span>
                    <span class="input-close" @click="delateTel($event,index)"></span>
                </li>               
            </ul>
        </div>
        <div class="tel-fare-data">
            <div class="fareOrdata-tab display-flex">
                <p :class="{'cur':type==1}" @click="navClick(1)">
                    <span>
                      充话费
                        <div class="active-color" v-show="type==1">
                            <div class="active-white"></div>
                        </div>
                    </span>
                </p>
                <p :class="{'cur':type==2}" @click="navClick(2)">
                    <span>充流量
                       <div class="active-color" v-show="type==2">
                            <div class="active-white"></div>
                        </div>
                    </span>
                </p>
            </div>
            <!-- 话费数据列表 -->
           <!-- 话费数据列表 -->
            <ul class="tab-data-list clearfix" v-if="type==1">
                <div v-if="isRightTel && oData.moneyProductList">
                    <li v-for="(data,index) in oData.moneyProductList" :key="index" :class="{'gray-bg':data.canPay==0,'cur':data.par==100}" @click="tabClick({price:data.salePrice,canPay:data.canPay,index:index,id:data.id})">
                        <span>{{data.par}}</span>
                        <b v-if="data.salePrice">售价{{data.salePrice}}元</b>
                    </li>
                </div>
                <div v-else>
                    <li v-for="(data,index) in telfareData" :key="index" class="sale-price" :class="{'cur':data.par==100}" @click="tabClick({index:index})">
                        <span>{{data.par}}<i>{{data.unit}}</i></span>
                    </li>
                </div>
            </ul>
            <!-- 流量返回有数据 -->
            <ul class="tab-data-list clearfix" v-if="type==2  && oData.trafficProductList && oData.trafficProductList.length > 0">
                <li v-for="(data,index) in oData.trafficProductList" class="sale-price" :class="{'cur':data.par==500,'gray-bg':(data.details.length==1&&data.details[0].canPay==0) || (data.details.length==2&&data.details[0].canPay==0&&data.details[1].canPay==0)}" v-if="index<8" @click="tabClick({index:index,details:data.details})" >
                    <span>{{data.par}}<i>{{data.unit}}</i></span>
                </li>
                <li v-for="(data,index) in oData.trafficProductList" class="sale-price" :class="{'gray-bg':(data.details.length==1&&data.details[0].canPay==0) || (data.details.length==2&&data.details[0].canPay==0&&data.details[1].canPay==0)}" v-if="index>=8&&showOtherVal" @click="tabClick({index:index,details:data.details})" >
                    <span>{{data.par}}<i>{{data.unit}}</i></span>
                </li>
                <li class="sale-price" v-if="!showOtherVal" @click="showOtherVal=true"><span>其他面值</span></li>
            </ul>
            <!-- 流量返回没数据 -->
            <ul class="tab-data-list clearfix" v-if="type==2 && oData.trafficProductList && oData.trafficProductList.length == 0">
                <li v-for="(data,index) in telflowData" class="sale-price" :class="{'cur':data.par==500}" v-if="index<8" @click="tabClick({index:index})" >
                    <span>{{data.par}}<i>{{data.unit}}</i></span>
                </li> 
                <li v-for="(data,index) in telflowData" class="sale-price" v-if="index>=8&&showOtherVal" @click="tabClick({index:index})" >
                    <span>{{data.par}}<i>{{data.unit}}</i></span>
                </li>
                <li class="sale-price" v-if="!showOtherVal" @click="showOtherVal=true"><span>其他面值</span></li>
            </ul>
            <!-- 流量全国省内选择框 -->
            <ul class="areachoose-list" v-show="type==2 && isRightTel && oData.trafficProductList">
                <li @click="isChooseProvince(1)" v-if="countryFlowCanPay" :class="{border:provinceFlowCanPay}">
                    <b>￥{{countryPrice}} <del>￥{{countryMarketPrice}}</del> </b>
                    <span><i>全国</i>全国适用，限当月</span>
                    <span class="choose-img" v-show="flowType==1"></span>
                </li>
                <li @click="isChooseProvince(2)" v-if="provinceFlowCanPay">
                    <b>￥{{provincePrice}} <del>￥{{provinceMarketPrice}}</del></b>
                    <span><i>省内</i>仅省内适用，限当月</span>
                    <span class="choose-img" v-show="flowType==2"></span>
                </li>
               
            </ul>
            
            <!-- 充值按钮 -->
            <div class="recharge-btn" v-if="isRightTel&&type==1&&oData.moneyProductList" :class="{'gray-bg':!telCanPay}" @click="showPayType(telCanPay)">优惠价¥{{telPrice}} &nbsp;去充值</div>

            <div class="recharge-btn province" v-if="isRightTel&&type==2&&flowType==2&&oData.trafficProductList" :class="{'gray-bg':!provinceFlowCanPay}" @click="showPayType(provinceFlowCanPay)">优惠价¥{{provincePrice}} &nbsp;去充值</div>

            <div class="recharge-btn country" v-if="isRightTel&&type==2&&flowType==1&&oData.trafficProductList" :class="{'gray-bg':!countryFlowCanPay}" @click="showPayType(countryFlowCanPay)">优惠价¥{{countryPrice}} &nbsp;去充值</div>

            <div class="recharge-btn gray-bg" v-if="!isRightTel || noData">去充值</div>
            
        </div>
        <p class="reminder" v-show="type==1">
            <span>温馨提示：</span>
            <span>1.全国通用，正常30分钟内到账，偏远地区延迟请联系客服</span>
            <span>2.月末月初为充值高峰期，到账时间可能会有延迟</span>
            <span>3.充值成功后不可申请退款</span>
            <span>4.如果充值失败，建议选择50元及以上的面额进行尝试</span>
            <span>5.只支持中国大陆手机号码充值</span>
            <span>6.充值过程遇到任何问题请咨询斑马客服</span>
        </p>
        <p class="reminder" v-show="type==2">
            <span>温馨提示：</span>
            <span>1.全国流量在全国漫游都可使用，省内流量在省外无法使用</span>
            <span>2.月末月初为充值高峰期，到账时间会有延迟</span>
            <span>3.只支持中国大陆手机号码充值</span>
            <span>4.充值过程遇到任何问题请咨询斑马客服</span>
        </p>
        <p class="contact-service">如有疑问请<a href="javascript:;" v-if="isApp" @click="goCantact()">联系客服</a><a href="tel:4001603602" v-else>联系客服</a></p>
        
        <payBox v-if="isShowPay"
                @close="isShowPay=false"
                :telPrice="telPrice"
                :type="type"
                :flowType='flowType'
                :countryPrice="countryPrice"
                :provincePrice="provincePrice"
                :orderId="charge.chargeOrderId"
                :payPrice="charge.payPrice">
        </payBox>

        <div class="showTip" v-show="isShowTip">{{tipHtml}}</div>
        <form name="form1">
            <input type="hidden" name="mobileNumber" id="telnum">
            <input type="hidden" v-model="payType" name="paytype">
            <input type="hidden" v-model="type" name="type">
            <input type="hidden" id="orderid" name="productId">
        </form>
</div>
</template>
<script>
import api from '@/api/tel'
import '@/assets/js/zepto.min'
import auth from '@/utils/auth'
import tools from '@/utils/tools'
import payBox from '@/components/payBox'
import topBarVue from '../../components/topBar.vue';
import {Toast}  from 'mint-ui'

export default {
  name: 'tel',
  data () {
    return {
      isApp: this.GetQueryString('isApp'),
      isLoad: false,
      isWx:tools.isWx,
      oData: {
        moneyProductList: [],
        trafficProductList: [],
        carrier: ''
      },
      isCleanTel: false,
      type: 1,
      telnum: '',
      isRightTel: false,
      isShowTip: false,
      telPrice: '', // 话费价格
      telCanPay: false, // 话费是否能购买
      provinceFlowCanPay: false, // 流量是否能购买
      countryFlowCanPay: false,
      showOtherVal: false, // 是否显示其他面值
      provincePrice: 0,
      countryPrice: 0,
      countryMarketPrice: 0,
      provinceMarketPrice: 0,
      telRechargeId: 0,
      flowProvinceId: 0,
      flowCountryId: 0,
      isShowPay: false,
      payType: 2,
      flowType: 1, // 1全国 2省内
      localTel: '',
      tipHtml: '',
      isGetOrder: false,
      telname: '',
      telfareData: [
        {
          par: 10,
          unit: '元'
        },
        {
          par: 20,
          unit: '元'
        },
        {
          par: 30,
          unit: '元'
        },
        {
          par: 50,
          unit: '元'
        },
        {
          par: 100,
          unit: '元'
        },
        {
          par: 200,
          unit: '元'
        },
        {
          par: 300,
          unit: '元'
        },
        {
          par: 500,
          unit: '元'
        }
      ],
      telflowData: [
        {
          par: 30,
          unit: 'M'
        },
        {
          par: 50,
          unit: 'M'
        },
        {
          par: 100,
          unit: 'M'
        },
        {
          par: 200,
          unit: 'M'
        },
        {
          par: 300,
          unit: 'M'
        },
        {
          par: 500,
          unit: 'M'
        },
        {
          par: 1,
          unit: 'G'
        },
        {
          par: 2,
          unit: 'G'
        },
        {
          par: 3,
          unit: 'G'
        },
        {
          par: 4,
          unit: 'G'
        },
        {
          par: 5,
          unit: 'G'
        },
        {
          par: 6,
          unit: 'G'
        },
        {
          par: 11,
          unit: 'G'
        }
      ],
      charge: {
        chargeOrderId: '',
        payPrice: ''
      },
      noData:false,
    }
  },
  components: {
    payBox
  },
  methods: {
        clearTel (){
           this.telnum='';
           this.oData.carrier='';
           this.oData.trafficProductList=[];
           this.oData.moneyProductLis = [];
        },
        // url里面拿需要的参数
        GetQueryString (name) {
          var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
          var r = window.location.search.substr(1).match(reg)
          if (r != null) return r[2]
          return null
        },
        removeAllSpace (str) {
          if (!str) return false
          var str = str.toString()
          return str.replace(/\s+/g, '')
        },
        hasClass: function (obj,cls){
            return obj.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'))
        },
        addClass: function(obj,cls){
            if(!this.hasClass(obj,cls)) obj.className +=' ' +cls;
        },
        removeClass: function(obj,cls){
            if(this.hasClass(obj,cls)){
                var reg=new RegExp('(\\s|^)'+cls+'(\\s|$)');
                obj.className=obj.className.replace(reg,'');
            }
        },
        goCantact:function(){
            window.WebViewJavascriptBridge.callHandler('pushToOtherController', {'type':'8'},function(res){
            })
        },
        navClick:function(index){
          
            if(this.type==index) return false;          
            if(this.isLoad) return false;
            this.type=index;
            if(this.type==2){
                this.provinceFlowCanPay=false;
                this.countryFlowCanPay=false;
            }
            if(this.type==1){
                this.telCanPay=false;
            }  
            if(!this.isRightTel) return false;
            this.isLoad=true;
           
            this.goAjax();
        },
        clickLocalTel:function(event,index,tel){
            event.stopPropagation();          
            this.telnum=tel;
            this.isCleanTel=false;
            this.telname='';
            //this.localTel[index]='';
        },
        delateTel:function(event,index){
            event.stopPropagation();
            this.localTel.splice(index,1)
        },
        getTelFun:function(){
            var _this=this;
            /*_this.telname='aaa';
            _this.telnum='18767501555';*/
            // if(parseFloat(this.GetQueryString('version'))<2.9 && this.isApp){
            //     this.showTip('请将app更新最新版本');
            //     return false;
            // }
            window.WebViewJavascriptBridge.callHandler('getContactsBook', {}, function(data){
                var data=JSON.parse(data);
                if(data.status=='success'){
                    if(data.phoneNumber.indexOf('+86')>=0){
                        data.phoneNumber=data.phoneNumber.replace('+86','')
                    }
                    _this.telnum=data.phoneNumber;
                    _this.telname=data.name;
                }else{
                    _this.showTip('获取号码失败');
                }            
            })
        },
        blurFun:function(){
            var _this=this;
            setTimeout(function(){
                _this.isCleanTel=false;
                //_this.getData();
            },50)
            
        },
        isChooseProvince:function(type){
            this.flowType=type;
            this.productId=this.flowType==2 ? this.flowProvinceId : this.flowCountryId;         
        },      
        focusFun:function(){
            
        },
        changeInput:function(event){
            //if(this.telnum==$('.tel-input input').val()) return false; 
            this.telname='';
            var t=this.removeAllSpace(this.telnum);
            if(t.length==11) return false;
            this.oData.carrier='';
            this.oData.trafficProductList=[];     //流量删除一位       
            console.log(t)            
            if(!t || event.keyCode==8) return false;
            this.telnum=t.replace(/(\d{3})(\d{4})/,"$1 $2 ");
        },
        tabClick:function(json){ 
           console.log(json);
            if(this.isLoad) return false;
            //if(this.type==1 && json.canPay==0) 
            if($('.tab-data-list li').eq(json.index).hasClass('gray-bg')){
                return false;
            } 
            $('.tab-data-list li').removeClass('cur');
            $('.tab-data-list li').eq(json.index).addClass('cur');
            var  _this=this;
            if(this.type==1){
                if(json.price){
                    this.telPrice=json.price;
                    this.telCanPay=json.canPay;
                    this.telRechargeId=json.id;
                }
            }else if(this.type==2){
                this.flowType=1;
                this.provinceFlowCanPay=false;
                this.countryFlowCanPay=false;
                if(!json.details) return false;
                if(json.details.length==1){
                    if(json.details[0].areaType==1){
                        this.flowType=2;
                    }
                }
                json.details.forEach(function(el,index){
                    if(el.areaType==1){
                        _this.provincePrice=el.salePrice;
                        _this.provinceMarketPrice=el.marketPrice;
                        if(el.canPay==1){
                            _this.provinceFlowCanPay=true;
                        }else{
                            _this.provinceFlowCanPay=false;
                        }
                        _this.flowProvinceId=el.id;
                    }
                    if(el.areaType==2){
                        _this.countryPrice=el.salePrice;
                        _this.countryMarketPrice=el.marketPrice;
                        if(el.canPay==1){
                            _this.countryFlowCanPay=true;
                        }else{
                            _this.countryFlowCanPay=false;
                        }
                        _this.flowCountryId=el.id;
                    }                   
                })
            }
            
        },
        goAjax () {
          var _this = this
          this.isLoad = true
          let params = {
            phoneNumber: this.removeAllSpace(this.telnum),
            type: this.type
          }

          api.getProducts(params).then(data => {
            let odata = data.data,
              _this = this
            this.isLoad = false
            // if(!odata.moneyProductList){
            //     return 
            // }
            if (data.status == 1) {
              this.isRightTel = true
              this.oData = odata
                if (this.type == 1) {
                // this.telfareData=odata.data.productList;
                    if(odata.moneyProductList && odata.moneyProductList.length > 0){
                         this.noData = false;
                        odata.moneyProductList.forEach(function (item, index) {
                            if (item.par == 100) {
                                _this.telPrice = item.salePrice
                                            _this.telCanPay = item.canPay
                                            _this.telRechargeId = item.id
                                        }
                            }) 
                    }else{
                        this.noData = true;
                    }
               
                } else{
                  
                // this.telflowData=odata.data.productList;
                  if(odata.trafficProductList && odata.trafficProductList.length > 0){
                      this.noData = false;
                    odata.trafficProductList.forEach(function (item, index) {
                        console.log('index:', item)
                                if (item.par == 500) {
                        item.details.forEach(function (el, index) {
                         console.log(el)
                        if (el.areaType == 1) { // 省内
                            _this.provincePrice = el.salePrice
                                                _this.provinceMarketPrice = el.marketPrice
                                                if (el.canPay == 1) {
                            _this.provinceFlowCanPay = true
                                                } else{
                            _this.provinceFlowCanPay = false
                                                }
                            _this.flowProvinceId = el.id
                                            } else if (el.areaType == 2) { // 全国
                            _this.countryPrice = el.salePrice
                                                _this.countryMarketPrice = el.marketPrice
                                                if (el.canPay == 1) {
                            _this.countryFlowCanPay = true
                                                } else{
                            _this.countryFlowCanPay = false
                                                }
                            _this.flowCountryId = el.id
                                            }
                        })
                     }
                    })
                  }else{
                       this.noData = true;
                  }
              }
            } else {
              this.isRightTel = false
                    this.showTip(odata.errorMsg)
            }
          })
        },
        getData:function(){
            console.log(this)
            var reg=/^1[3,4,5,8,7,9]\d{9}$/,
                _this=this;
            if(reg.test(this.removeAllSpace(this.telnum))){
                this.isCleanTel=false;
                $('.tel-input input').blur();

                this.goAjax();
            }else{
                Toast('请输入正确手机号码');
            }
        },
        showTip:function(html){
            var _this=this;
            this.tipHtml=html;
            this.isShowTip=true;                
            setTimeout(function(){
                _this.isShowTip=false;
            },2000)
        },
        // 去充值
        showPayType (canpay) {
        
          if(!this.isApp){
             Toast('下载斑马会员App立享会员特权')
             return;
          }
          if (!canpay) return false
          // if (parseFloat(this.GetQueryString('version')) < 2.8 && this.isApp) {
          // this.showTip('请将app更新最新版本')
          //     return false
          // }
          
          if (this.type == 1) {
          this.orderId = this.telRechargeId
          }else {
          this.orderId = this.flowType == 2 ? this.flowProvinceId : this.flowCountryId
          }
          let params = {
            saleUnitId: this.orderId
          }

          

        
       
            api.getValidateBeforeAdd(params).then((data) => {
            if (data.status == 1) {
              let param = {
                mobileNumber: this.removeAllSpace(this.telnum),
                productId: this.orderId,
                type: this.type
              }

               
                api.getAddChargeOrderAjax(param).then(response => {
                    if(response.status == 1){
                        
                        this.charge.chargeOrderId = response.data.orderId;
                        this.charge. payPrice = response.data.payPrice;
                        this.isShowPay = true
                      
                    }
                  
                })
                }
          })          
        },
        goOreder:function(){
            var _this=this;
            if(this.type==1){
                this.orderId=this.telRechargeId;
            }else{
                this.orderId=this.flowType==2 ? this.flowProvinceId : this.flowCountryId;
            }
            if(this.isApp){
                if(this.isGetOrder) return false;
                //this.isLoad=true;
                this.$http({
                    url: this.appLinkStr('/ygg-hqbs/order/addChargeOrderAjax'),
                    method: 'post',
                    params:{
                        mobileNumber:this.removeAllSpace(this.telnum),
                        productId:this.orderId,
                        type:this.type
                    }                
                }).then(function(data){
                    var oData=data.data;
                    if(oData.status==0){
                        this.showTip(oData.errorMsg);
                    }else if(oData.status==1){ 
                        this.isGetOrder=true;
                        window.location.href='ggj://open/pay/'+oData.orderId+'/'+this.payType+'/'+oData.payPrice;
                    }else if(oData.status==2){//未登录
                        window.location.href='ggj://redirect/typeCommon/{"type":6}'
                    }
                }).catch(function(){
                    this.isGetOrder=false;
                })
            }else{
                if(!loginLoad()){
                    loginFun()
                    return false;
                }
                this.$http({
                    url: '/ygg-hqbs/virtualOrder/validateBeforeAdd',
                    method: 'post',
                    params:{
                        productId:this.orderId
                    }                
                }).then(function(data){
                    var oData=data.data;
                    if(oData.status==1){
                        document.querySelector('#telnum').value=this.removeAllSpace(this.telnum);
                        document.querySelector('#orderid').value=this.orderId;
                        document.form1.action="/ygg-hqbs/order/addChargeOrder";
                        document.form1.submit();
                        return false;
                    }else if(oData.status==3){
                        this.showTip('此权益只限会员使用');
                    }else if(oData.status==4){
                        this.showTip('此商品已下架');
                    }                    
                })
                
            }
        }        
  },
  watch: {
    telnum:function(){
            var t=this.removeAllSpace(this.telnum);
            //if(t.length==11) return false;
            //this.oData.carrier='';
            //this.oData.productList='';
            //this.telname=''; 
            if(this.type==2){
                this.provinceFlowCanPay=false;
                this.countryFlowCanPay=false;
            } 
            $('.tab-data-list li').removeClass('cur');
      
            if(this.removeAllSpace(this.telnum).length>10){                
                // this.oData.trafficProductList= [];
                // this.oData.moneyProductList=[];
                // this.carrier='';                
                this.getData();
            }else{
                this.isCleanTel=true;
                this.isRightTel=false;
            }
        }
  },
  created () {
    api.getRecords().then(data => {
      let oData = data.data
      if (data.status == 1) {
         //oData.records = ["15858216771","15858216771","15858216771","15858216771"];
        if (oData.records && oData.records.length > 0) {
          oData.records.forEach((el, index) => {
            oData.records[index] = el.replace(/(\d{3})(\d{4})/, '$1 $2 ')
          })
          this.localTel = oData.records
          this.telnum = oData.records[0]
        }
      } else {
      }
    })
    tools.bridgeFun()
  }
}
</script>

<style scoped lang="less">
.display-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.box-flex, .fareOrdata-tab p {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
.border{
    border-bottom: 1px solid #f0f0f0;
}
.showTip {
  position: fixed;
  top: 20%;
  left: 25%;
  padding:0 12px;
  z-index:30;
  height: 50px;
  line-height: 50px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: center;
}
.recharge-box {
  font-size: 14px;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  overflow:scroll;
  background:#f8f8f8;
}
.input-close {
  display: block;
  width: 16px;
  height: 16px;
  background: url() no-repeat;
  background-size: 100%;
}
.tel-input {
  width: 100%;
  background: #fff;
  text-align: center;  
  position: relative;
  padding: 15px 0;
}
.tel-input .input-bg{
  width:88%; 
  position: relative; 
  margin: 0 15px;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
}
.tel-input input {
   display: block;
    width: 79%;
    /* height: 1.33333rem;
    line-height: 1.33333rem; */
    /* margin: 0.50667rem 0; */
    padding:11px 0 11px 10px;   
    font-size: 20px;
    color:#1a1a1a;
}
.curPadding input{
    padding: 2.5% 4% 6% 4%;
}
.tel-input .input-close, .input-bg > span {
    position: absolute;
    right: 10px;
    top: 50%;
    margin-top: -8px;
    color: #858585;
}
.tel-input .getAddressList{
    display: block;
    width: 24px;
    height: 36px;
    background: url(~images/tel/address-icon.png) no-repeat center;
    background-size: 100%;
    margin-top: -18px;
} 
.tel-input p{
    position: absolute;
    left: 10%;
    top: 54%;
    color: #999;
    font-size:10px;
}
.tel-input .localtel-list {
    width: 94%;
    position: absolute;
    top: 81%;
    left: 0;
    z-index: 100;
    background: #fff;
    border-bottom:1px solid #f0f0f0;
}
.tel-input .localtel-list li {
      width: 92%;
      padding-left: 25px;
      margin: 10px auto;
      text-align: left;
      position: relative;
}
.tel-input .localtel-list li .input-close {
        right: 12px;
}
.tel-fare-data {
  background: #fff;
  margin-top: 8px;
  padding-bottom: 15px;
}
.fareOrdata-tab {
  border-bottom: 1px solid #f0f0f0;
}
.fareOrdata-tab p {
  
    text-align: center;
    font-size: 16px;
    color: #858585;
}
.fareOrdata-tab p span {
      position: relative;
      display: inline-block;
      padding: 8px 0;
     // font-weight: bold;
}
.fareOrdata-tab .cur {
    color: #E1B962;
    font-weight: bold;
}
.fareOrdata-tab .cur span {
     // border-bottom: 2px solid  #C59F51;      
}
.tab-data-list {
  overflow: hidden;
  text-align: center;
  padding-bottom: 20px;
}
.tab-data-list li {
    width: 2.74667rem;
    height: 48px;
    padding:3px 0;
    margin: 0.4rem 0 0 0.4rem;
    border: 1px solid transparent;
    border-radius: 4px;
    float: left;
    font-size: 16px;
    background: #F6F6F6;
}
.tab-data-list li b {
      display: block;
      font-size: 12px;
}
.tab-data-list li span {
      display: block;
      margin:4px 0 0 0;
}
.tab-data-list .sale-price {
    line-height: 38px;
}
.tab-data-list .sale-price span {
      margin: 0;
      line-height:48px;
}
.tab-data-list .gray-bg {
   // border: 1px solid #D9D9D9;
    color: #B2B2B2;
}
.tab-data-list .cur {
    background: #E1B962;
    color: #fff;
    border: 1px solid #E1B962;
}
.areachoose-list {
  /*margin-top: 15px;*/
  //border-top: 1px solid #f0f0f0;
}
.areachoose-list li {
    position: relative;
    padding: 6px 0 12px 0;
    margin:0 15px;
    //border-bottom: 1px solid #f0f0f0;
}
.areachoose-list li b {
      margin-bottom: 2px;
      font-size: 18px;
      font-weight: bold;
}
.areachoose-list li del{
    font-weight:normal;
    font-size: 12px;
    color: #858585;
}
.areachoose-list li b, .areachoose-list li span {
      display: block;
}
.areachoose-list li i {
      padding: 1px 2px;
      margin-right: 5px;
      color: #fff;
      background:  #E1B962;
      font-size: 10px;
}
.areachoose-list li span {
      font-size: 12px;
}
.areachoose-list li .choose-img {
      position: absolute;
      top: 50%;
      right: 16px;
      margin-top: -10px;
      width: 21px;
      height: 21px;
      background: url() no-repeat;
      background-size: 100%;
}
.recharge-btn {
  width: 92%;
  height: 44px;
  line-height: 44px;
  margin: 0 auto 0 auto;
  background: #E1B962;
  color: #fff;
  text-align: center;
  font-size:16px;
  border-radius: 4px;
}
.reminder {
  width: 85%;
  margin: 21px auto;
  font-size: 12px;
  color: #999;
}
.reminder span {
    display: block;
    line-height: 18px;
}
.contact-service {
  margin: 20px 0 19px 0;
  color: #999;
  font-size: 14px;
  text-align: center;
}
.contact-service a {
    color: #373737;
    text-decoration: underline;
}
.payment-wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index:20;
  width: 100%;
  background: #fff;
  overflow: hidden;
}
.payment-wrap h2 {
    height: 37px;
    line-height: 37px;
    font-size: 16px;
    background: #f0f0f0;
    text-align: center;
    position: relative;
}
.payment-wrap h2 .close-pay {
      width: 15px;
      height: 15px;
      position: absolute;
      top: 50%;
      right: 10px;
      margin-top: -6px;
      background: url() no-repeat;
      background-size: 100%;
}
.payment-wrap p {
    font-size: 13px;
    text-align: center;
    padding: 11px 0;
}
.payment-wrap p b {
      color: #f00;
}
.payment-wrap .payment-btn {
    width: 92%;
    margin: 15px auto;
    height: 40px;
    line-height: 40px;
    text-align: center;
    color: #fff;
    font-size: 16px;
    background: #000;
}
.payment-order-info {
  padding: 0 10px;
}
.payment-order-info li {
  padding: 12px 0;
}
.payment-order-info li + li {
  border-top: 1px solid #f0f0f0;
}
.pay-unionPay:before, .pay-alipay:before, .pay-wx:before {
  content: '';
  display: inline-block;
  width: 26px;
  height: 26px;
  margin: 0 5px;
  background: no-repeat center;
  background-size: contain;
  vertical-align: middle;
}
.pay-unionPay:before {
  background-image: url();
}
.pay-alipay:before {
  background-image: url();
}
.pay-wx:before {
  background-image: url();
}
.pay-select {
  width: 20px;
  height: 20px;
  margin-top: 5px;
 /* margin-right: 5px;*/
  border: 1px solid #ddd;
  border-radius: 50%;
  box-sizing: border-box;
  float: right;
}
.pay-select.on {
  background: url() no-repeat;
  background-size: cover;
  border: none;
}
.gray-bg {
  background: #D9D9D9;
}
.mask{
  position:fixed;
  top:0;
  left:0;
  z-index:10;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.2);
}
.active-color{
    position: absolute;
    bottom: 0;
    //right: 48px;
    width: 48px;
    height: 3px;
    background-color: #E1B962;
    transform: skew(-30deg);
    .active-white {
      position: absolute;
      bottom: 0;
      right: 4px;
      width: 2px;
      height: 3px;
      background-color: #ffffff;
    }
  }
</style>